<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useChatStore } from '@/stores/chat'
import { storeToRefs } from 'pinia'

const sidebarCollapsed = ref(window.innerWidth <= 768)
const chatStore = useChatStore()
const { isDarkMode } = storeToRefs(chatStore)
const isMobile = ref(window.innerWidth <= 768)

const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const handleResize = () => {
  isMobile.value = window.innerWidth <= 768
  if (isMobile.value) {
    sidebarCollapsed.value = true
  }
}

onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
  // 初始化主题
  document.documentElement.setAttribute('data-theme', isDarkMode.value ? 'dark' : 'light')
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const createNewChat = () => {
  chatStore.createNewChat()
}

const toggleTheme = () => {
  chatStore.toggleTheme()
}
</script>

<template>
  <div class="app-container">
    <!-- 添加蒙版 -->
    <div 
      v-if="!sidebarCollapsed && isMobile" 
      class="sidebar-overlay"
      @click="toggleSidebar"
    ></div>

    <!-- 侧边栏 -->
    <aside :class="['sidebar', { collapsed: sidebarCollapsed }]">
      <div class="sidebar-header">
        <button class="new-chat" @click="createNewChat">
          <svg stroke="currentColor" fill="none" viewBox="0 0 24 24" class="icon">
            <path d="M12 4.5v15m7.5-7.5h-15" stroke-width="2" stroke-linecap="round"></path>
          </svg>
          <span v-if="!sidebarCollapsed">New chat</span>
        </button>
      </div>
      <div class="sidebar-content">
        <div class="chat-list">
          <div 
            v-for="chat in chatStore.conversations" 
            :key="chat.id"
            class="chat-item"
            :class="{ active: chat.id === chatStore.currentConversation?.id }"
            @click="chatStore.selectConversation(chat.id)"
          >
            <svg stroke="currentColor" fill="none" viewBox="0 0 24 24" class="icon">
              <path d="M8 10h8M8 14h4m-4-8h8m-8 12h8m-8 4h8M4 2v20V2zm16 0v20V2z" stroke-width="2" stroke-linecap="round"></path>
            </svg>
            <span class="title">Chat {{ new Date(chat.id).toLocaleDateString() }}</span>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主要内容区 -->
    <main :class="['main-content', { 'sidebar-collapsed': sidebarCollapsed }]">
      <!-- 添加主题切换按钮 -->
      <button class="theme-toggle-button" @click="toggleTheme" :title="isDarkMode ? '切换到亮色模式' : '切换到暗色模式'">
        <svg v-if="isDarkMode" viewBox="0 0 24 24" class="icon">
          <path fill="currentColor" d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0c-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0c-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0c.39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41c-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41c-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
        </svg>
        <svg v-else viewBox="0 0 24 24" class="icon">
          <path fill="currentColor" d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9s9-4.03 9-9c0-.46-.04-.92-.1-1.36c-.98 1.37-2.58 2.26-4.4 2.26c-3.03 0-5.5-2.47-5.5-5.5c0-1.82.89-3.42 2.26-4.4c-.44-.06-.9-.1-1.36-.1z"/>
        </svg>
      </button>
      <button class="collapse-button" @click="toggleSidebar">
        <svg viewBox="0 0 24 24" class="icon">
          <path 
            :d="sidebarCollapsed 
              ? 'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'
              : 'M3 18h13v-2H3v2zm0-5h13v-2H3v2zm0-7v2h13V6H3z'"
            fill="currentColor"
          />
        </svg>
      </button>
      <slot></slot>
    </main>
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  min-width: 320px;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--secondary-bg);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: fixed;
  height: 100vh;
  z-index: 1000;
  transform: translateX(0);
}

.sidebar.collapsed {
  transform: translateX(-100%);
}

.collapse-button {
  position: fixed;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2001;
  padding: 0;
  color: var(--text-primary);
  transition: all 0.2s;
}

.collapse-button:hover {
  background: var(--chat-bg);
  transform: scale(1.1);
}

.sidebar.collapsed .title,
.sidebar.collapsed .new-chat span {
  display: none;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  transition: all 0.3s ease;
  width: calc(100% - var(--sidebar-width));
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-content.sidebar-collapsed {
  margin-left: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
    width: 100%;
  }
}

.sidebar-header {
  padding: 0.8rem;
  border-bottom: 1px solid var(--border-color);
}

.new-chat {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s;
}

.new-chat:hover {
  background: var(--chat-bg);
}

.icon {
  width: 16px;
  height: 16px;
}

.chat-list {
  padding: 0.8rem;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.2s;
}

.chat-item:hover {
  background: var(--chat-bg);
}

.chat-item.active {
  background: var(--chat-bg);
}

.title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.theme-toggle-button {
  position: fixed;
  right: 56px; /* 位于折叠按钮左侧 */
  top: 12px;
  width: 32px;
  height: 32px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2001;
  padding: 0;
  color: var(--text-primary);
  transition: all 0.2s;
}

.theme-toggle-button:hover {
  background: var(--chat-bg);
  transform: scale(1.1);
}

.theme-toggle-button .icon {
  width: 20px;
  height: 20px;
}
</style> 